<template>
	<a-modal :width="1150" :visible="visible" title="添加文案" :mask-closable="false" @ok="handleOk" @cancel="handleClose" centered>
		<div class="main_con">
			<div id="phoneCon" class="left_phone_view" v-if="visible">
				<a-spin style="width:360px; height: 640px;" :spinning="loading">
					<DraggableContainer :style="resizableStyle" :referenceLineColor="'white'">
						
						<div class="back_con single_image" :style="`--backImage: url(${wordObj?.imageArr[0]?.material_url})`" v-if="wordObj?.image_tpl == 'single_image' && wordObj?.imageArr?.length">
						</div>
						
						<div class="back_con couple_image_9_16" v-if="wordObj?.image_tpl == 'couple_image_9_16' && wordObj?.imageArr?.length">
							<div class="image_item" 
								v-for="(item, index) in wordObj?.imageArr.filter((a, i)=>i<=1)"
								:style="`--backImage: url(${item?.material_url})`">
							</div>
						</div>
						
						<div class="back_con couple_image_16_9" v-if="wordObj?.image_tpl == 'couple_image_16_9' && wordObj?.imageArr?.length">
							<div class="image_item" 
								v-for="(item, index) in wordObj?.imageArr.filter((a, i)=>i<=1)"
								:style="`--backImage: url(${item?.material_url})`">
							</div>
						</div>
						
						<div class="back_con couple_image_1_1" v-if="wordObj?.image_tpl == 'couple_image_1_1' && wordObj?.imageArr?.length">
							<div class="image_item" 
								v-for="(item, index) in wordObj?.imageArr.filter((a, i)=>i<=1)"
								:style="`--backImage: url(${item?.material_url})`">
							</div>
						</div>
						
						<div class="back_con four_image_9_16" v-if="wordObj?.image_tpl == 'four_image_9_16' && wordObj?.imageArr?.length">
							<div class="image_item" 
								v-for="(item, index) in wordObj?.imageArr.filter((a, i)=>i<=3)"
								:style="`--backImage: url(${item?.material_url})`">
							</div>
						</div>
						
						<div class="back_con four_image_1_1" v-if="wordObj?.image_tpl == 'four_image_1_1' && wordObj?.imageArr?.length">
							<div class="image_item" 
								v-for="(item, index) in wordObj?.imageArr.filter((a, i)=>i<=3)"
								:style="`--backImage: url(${item?.material_url})`">
							</div>
						</div>
						
						<!-- 移动容器 -->
						<Vue3DraggableResizable v-show="item.copywriting" v-for="(item, index) in wordList"
							:key="'art_con'+index" :initW="wordList[index].width" :initH="wordList[index].height"
							v-model:x="wordList[index].elLeft" v-model:y="wordList[index].elTop"
							v-model:w="wordList[index].width" v-model:h="wordList[index].height"
							v-model:active="wordList[index].active" :draggable="true" :resizable="false" :parent="true">
							<div @click.stop="getPosition(index)" :style="wordStyle(item, index)">
								<span :id="'art_con_'+index" >{{item.copywriting}}</span>
							</div>
						</Vue3DraggableResizable>
					</DraggableContainer>
				</a-spin>
			</div>
			<div class="right_set_con" id="setCon">
				<a-card class="card_item" :id="'card_'+card_index" style="width: 100%"
					v-for="(card_item, card_index) in wordList" :key="card_index">
					<template #title>
						<span style="font-weight: bold; font-size: 15px;">{{card_index == 0?'主标题':'副标题'}}</span>
					</template>
					<template #extra>
						<DeleteOutlined @click="deleteForm(card_index)" class="delete_icon" />
					</template>
					<div class="form_con">
						<div class="left_form_con">
							<div class="form_item" style="align-items: flex-start;">
								<div class="form_title">文案</div>
								<div class="form_value">
									<a-textarea :bordered="false" style="border: none;
										background-color: #fafafa; border: 1px solid #eee;
										border-radius: 10px;" 
										v-model:value="wordList[card_index].copywriting" placeholder="请输入"
										:auto-size="{ minRows: 3, maxRows: 3 }" />
								</div>
							</div>
						</div>
						<div class="right_form_con">
							<div class="form_item" style="margin: 10px 0; justify-content: flex-start;">
								<div class="form_title">文字颜色</div>
								<color-picker v-model:hex="wordList[card_index].color" :show-opacity="false" :btn-style="{
									width: '124px',
									height: '32px',
									marginLeft: '10px'
								}" />
							</div>
							<div class="form_item" style="margin-top: 12px;">
								<div class="form_title">字体</div>
								<div class="form_value">
									<a-select @change="value=>handleSelectChange(value, card_index)"
										v-model:value="wordList[card_index].typeface" placeholder="请输入"
										style="width: 48%;" :options="typefaceOptions"></a-select>
							
									<a-select v-model:value="wordList[card_index].font_size" placeholder="请选择"
										style="width: 48%;" :options="fontsizeOptions"></a-select>
								</div>
							</div>

						</div>
					</div>
				</a-card>
				<div class="add_btn" v-if="wordList?.length == 1">
					<a-button type="dashed" block @click="addForm">
						<template #icon>
							<PlusOutlined />
						</template>
						添加副标题
					</a-button>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		nextTick,
		computed
	} from 'vue';
	import {
		PlusOutlined,
		DeleteOutlined,
		AlignCenterOutlined,
		AlignLeftOutlined,
		AlignRightOutlined,
		StopOutlined
	} from '@ant-design/icons-vue';
	import request from "../../../../../../common/utils/request";
	import {
		message
	} from 'ant-design-vue';
	import {
		DraggableContainer
	} from 'vue3-draggable-resizable';
	import Vue3DraggableResizable from 'vue3-draggable-resizable';
	//default styles
	import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';

	import ColorPicker from "colorpicker-v3";
	import "colorpicker-v3/style.css";
	import store from '@/store';
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			wordObj: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {
			PlusOutlined,
			DeleteOutlined,
			StopOutlined,
			DraggableContainer,
			Vue3DraggableResizable,
			ColorPicker,
		},
		setup(props, context) {
			const state = reactive({
				currentCardIndex: 0,
				loading: false,
				wordList: [],
				typefaceOptions: [],
				fontsizeOptions: [{
					label: '12',
					value: 12
				}, {
					label: '14',
					value: 14
				}, {
					label: '18',
					value: 18
				}, {
					label: '24',
					value: 24
				}, {
					label: '32',
					value: 32
				}, {
					label: '36',
					value: 36
				}, {
					label: '44',
					value: 44
				}, {
					label: '48',
					value: 48
				}, {
					label: '64',
					value: 64
				}, {
					label: '80',
					value: 80
				}]
			})

			const resizableStyle = computed(() => {
				return {
					backgroundImage: `url(https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png), url(https://hf.pigcms.com/static/wxapp/images/phone_black_back.png)`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: '360px',
					height: props.wordObj?.radioType == '1:1'?'360px':props.wordObj?.radioType == '16:9'?'202.5px':props.wordObj?.radioType == '9:16'?'640px':props.wordObj?.currentRadioHeight+'px'
				}
			})
			const wordStyle = computed(() => {
				return function(item, index) {
					nextTick(()=>{
						let domObj = document.getElementById('art_con_'+index)
						state.wordList[index].width = domObj?.offsetWidth
						state.wordList[index].height = domObj?.offsetHeight
					})
					let font_family = state.typefaceOptions.find(v => v.material_url == item.typeface)
						?.font_family
					return {
						'cursor': 'grab',
						'font-family': font_family,
						'font-size': item.font_size + 'px',
						'width': item.width + 'px',
						'height': item.height + 'px',
						'line-height': item.height + 'px',
						'color': item.color,
						'white-space': 'nowrap'
					}
				}
			})

			const generateRandomString = () => {
				let randomString = '';
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				const charactersLength = characters.length;
				for (let i = 0; i < 6; i++) {
					randomString += characters.charAt(Math.floor(Math.random() * charactersLength));
				}
				return randomString;
			}

			const handleOk = () => {
				let flag = false
				state.wordList.map(item => {
					if (!item.copywriting) {
						flag = true
					}
					let font_family = state.typefaceOptions.find(v => v.material_url == item.typeface)
						?.font_family
					item.font_family = font_family
				})
				const obj = {
					name: props.wordObj.name ? props.wordObj.name : generateRandomString(),
					list: state.wordList
				}

				if (flag) {
					message.warn('请先完善文字信息')
					return
				}
				context.emit('close', obj)
			}

			const handleClose = () => {
				context.emit('close')
			}

			const addForm = () => {
				let material_url = state.typefaceOptions.find(item => item.name == '站酷快乐体').material_url
				state.wordList.push({
					width: 0,
					height: 0,
					position: 'center',
					typeface: material_url,
					copywriting: '',
					font_size: 32,
					elLeft: 0, // 元素的左偏移量
					elTop: 0, // 元素的右偏移量
					active: true,
					color: '#FFF000',
				})
				state.loading = true
				customFont('HappyZcool-2016', material_url)
			}

			const deleteForm = (index) => {
				if (index == 0) {
					message.warn('至少要有主标题')
					return
				}
				state.wordList.splice(index, 1)
			}

			const getPosition = (index) => {
				const dom = document.getElementById('card_' + index)
				const scrollCon = document.getElementById('setCon')
				scrollCon.scrollTo({
					top: dom.offsetTop - 80,
					behavior: 'smooth'
				})
			}

			const getFontClass = () => {
				state.typefaceOptions = []
				request.get('/work_ai', '/user/shotstack/material/fonts/list').then(res => {
					res.result.map(item => {
						item.label = item.name
						item.value = item.material_url
						state.typefaceOptions.push(item)
					})
					if (!props.wordObj.list) {
						let material_url = state.typefaceOptions.find(item => item.name == '站酷快乐体')
							.material_url
						state.wordList = [{
							width: 0,
							height: 0,
							position: 'center',
							typeface: material_url,
							copywriting: '',
							font_size: 32,
							elLeft: 0, // 元素的左偏移量
							elTop: 0, // 元素的右偏移量
							active: true,
							color: '#FFF000'
						}]
						state.loading = true
						customFont('HappyZcool-2016', material_url)
					}
				})
			}

			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
					state.loading = false
				}).catch((error) => {
					state.loading = false
				});
			}

			const handleSelectChange = (value) => {
				state.loading = true
				let font_family = state.typefaceOptions.find(item => item.value == value).font_family
				customFont(font_family, value)
			}

			watch(() => props.visible, val => {
				if (val) {
					getFontClass()
				}
				if (val && props.wordObj && props.wordObj.list?.length > 0) {
					state.wordList = JSON.parse(JSON.stringify(props.wordObj.list))
					state.loading = true
					state.wordList.map((item, index) => {
						customFont(item.font_family, item.typeface)
					})
				}
			})
			return {
				...toRefs(state),
				handleOk,
				addForm,
				handleClose,
				deleteForm,
				getPosition,
				getFontClass,
				handleSelectChange,
				wordStyle,
				resizableStyle
			}
		}
	})
</script>

<style lang="less" scoped>
	
	.back_con{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		&.single_image{
			top: -1px;
			height: calc(100% + 1px);
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-image: var(--backImage);
		}
		
		&.couple_image_9_16{
			display: flex;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}
		
		&.couple_image_16_9{
			display: flex;
			align-items: center;
			top: -1px;
			height: calc(100% + 1px);
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}
		
		&.couple_image_1_1{
			display: flex;
			align-items: center;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}
		
		&.four_image_9_16{
			display: flex;
			flex-wrap: wrap;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 50%;
				width: 50%;
			}
		}
		
		&.four_image_1_1{
			display: flex;
			flex-wrap: wrap;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 50%;
				width: 50%;
			}
		}
	}

	:deep(.ss-card-head) {
		height: 40px !important;
		min-height: 40px !important;
		width: 100%;
		display: flex;
		align-items: center;
		background: #e6e6e6;

		.ss-card-head-wrapper {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ss-card-head-title {
				font-size: 14px;
			}
		}
	}

	.delete_icon {
		font-size: 16px;
		cursor: pointer;

		&:hover {
			color: red;
		}
	}

	.align_type {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		transform: translateX(-10px);

		.type_item {
			margin-left: 20px;
			font-size: 20px;
			cursor: pointer;

			&.active {
				color: #2878FF;
			}

			&:hover {
				color: #2878FF;
			}
		}
	}

	.form_con {
		display: flex;
		justify-content: space-between;

		.left_form_con,
		.right_form_con {
			width: 50%;

			.form_item {
				width: calc(100% - 10px);
				display: flex;
				align-items: center;
				margin-top: 10px;
				justify-content: space-between;

				.form_title {
					width: 60px;
					text-align: right;
				}

				.form_value {
					width: calc(100% - 70px);
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.main_con {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left_phone_view {
			width: 360px;
			height: 640px;
			background-color: #000;
			background-image: url('https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center center;
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.right_set_con {
			width: calc(100% - 370px);
			height: 640px;
			overflow-y: scroll;
			overflow-x: hidden;

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			.card_item {
				margin-top: 10px;

				&:nth-child(1) {
					margin-top: 0;
				}
			}

			.add_btn {
				bottom: 0;
				left: 0;
				margin-top: 10px;
			}
		}
	}
</style>